
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>

<div style="margin:50px auto;width:1000px;">
    <p style="font-size:18px;font-family:'微软雅黑';">样式参考,自定义小清新皮肤,带跳转框,精简模式二：</p><br />
    <div class="page_div4"></div>
</div>
<div style="margin:50px auto;width:1000px;">
    <p style="font-size:18px;font-family:'微软雅黑';color:red;line-height:30px;">
        该插件兼容至IE8及其以上版本，通过参数可以选择post方式请求还是get方式请求，支持异步获得数据通过回调函数操作html内容，皮肤可根据需求自己根据参数修改，更多定制请参看所有参数，给所有需要使用和学习的人，如遇问题可与我本人联系，鄙人QQ：997345399
    </p>
</div>
<script src="../../scripts/jquery/1.10.2/jquery.js"></script>
<script src="jquery.paging.js"></script>
<script type="text/javascript">
    $(function () {
        //自定义皮肤，精简模式二
        var page5 = $(".page_div4").paging({
            total: 100,
            animation: false,
            centerBgColor: "#fff",
            centerFontColor: "#000",
            centerBorder: "1px solid #ddd",
            transition: "all .2s",
            centerHoverBgColor: "#25dd3d",
            centerHoverBorder: "1px solid #25dd3d",
            centerFontHoverColor: "#fff",
            otherFontHoverColor: "#fff",
            otherBorder: "1px solid #ddd",
            otherHoverBorder: "1px solid #25dd3d",
            otherBgColor: "#fff",
            otherHoverBgColor: "#25dd3d",
            currentFontColor: "#fff",
            currentBgColor: "#f79898",
            currentBorder: "1px solid #f79898",
            fontSize: 13,
            currentFontSize: 13,
            cormer: 2,
            gapWidth: 3,
            showJump: true,
            jumpBgColor: "#fff",
            jumpFontHoverColor: "#fff",
            jumpHoverBgColor: "#25dd3d",
            jumpBorder: "1px solid #ddd",
            jumpHoverBorder: "1px solid #25dd3d",
            simpleType: 1
        });

        //调用返回当前页API
        //if(page1.IsDone()){
        //    setInterval(function () {
        //        alert(page1.GetCurrentPage());
        //    }, 5000);
        //}

        ////API 返回当前选中页数
        //if (page2.IsDone()) {
        //    alert(page2.GetCurrentPage());  //弹出显示当前选中页码
        //}

        ////API 新增请求参数
        //if (page2.IsDone()) {
        //    page2.AddAjaxData({ "date": "2011-12-12", "content": "this is test add extra param" }); //在原有参数基础上,新增请求参数
        //}

        ////API 获取当前拼装好的请求url,用于后续修改url,以便在后面追加参数

        ////API 修改请求url参数
        //if (page2.IsDone()) {
        //    page2.SetRequestUrl("/Home/Index?id=1&content='test132'");
        //}



        /******可使用参数列表*********/
        //total: 0,   //全部页数
        //showPage: 9,  //显示的页数
        //height: 30,    //高
        //width: 8,      //宽
        //jumpInputWidth: 60,   //跳转输入框的宽
        //fontFamily: "微软雅黑",  //字体
        //fontSize: 12,    //字体大小
        //currentFontSize: 12,    //当前选中页的字体大小
        //fontWeight: 400,   //字体宽度
        //currentFontWeight: 400,   //当前选中页的字体粗细
        //centerFontColor: "#000",  //中间字体颜色
        //otherFontColor: "#000",   //两边字体颜色
        //centerFontHoverColor: "red",  //中间鼠标悬浮的字体颜色
        //otherFontHoverColor: "red",  //两边鼠标悬浮的字体颜色
        //currentFontColor: "red",    //当前选中页的字体颜色
        //jumpFontColor: "#000",          //跳转内部标签的字体颜色
        //jumpFontHoverColor: "red",      // 跳转内部标签的悬浮字体颜色
        //currentPage: 1,             //当前页
        //centerBgColor: "#b6ff00",   //中间页数按钮的底色
        //centerHoverBgColor: "",    //中间鼠标悬浮的的底色
        //otherBgColor: "#b6ff00",    //两边按钮的底色
        //otherHoverBgColor: "",     //两边鼠标悬浮的背景颜色
        //jumpBgColor: "#b6ff00",           //跳转a标签按钮的背景色
        //jumpHoverBgColor: "",       //跳转a标签背景的悬浮背景色
        //currentBgColor: "#73ccfd",      //当前选中页的底色
        //centerBorder: "1px solid green",           //中间按钮的边框
        //otherBorder: "1px solid green",          //两边按钮的边框
        //centerHoverBorder: "",               //中间按钮悬浮边框
        //otherHoverBorder: "",                 //两边按钮悬浮边框
        //jumpBorder: "1px solid green",            //跳转内标签的边框
        //jumpHoverBorder: "",                   //跳转内标签的悬浮边框
        //currentBorder: "",          //当前选中页的边框
        //showJump: false,               //是否显示跳转功能
        //transition: "initial",       //效果延迟
        //gapWidth: 2,      //间隙宽度
        //cormer: 0,   //按钮的边角曲度
        //beforeBtnString: "上一页",  //上一页按钮内显示的文字
        //nextBtnString: "下一页",   //下一页按钮内显示的文字
        //firstBtnString: "首页",   //首页按钮内显示的内容
        //lastBtnString: "尾页",   //尾页按钮内显示的内容
        //jumpBtnString: "跳转",    //跳转按钮的显示内容
        //submitStyle: "ajax",   //点击按钮后的提交方式，有a标签的href提交和ajax异步提交两种选择,滚动显示方式只支持ajax方式
        //ajaxSubmitType: "post",      //注明是通过get方式访问还是post方式访问
        //idParameter: "pageId",               //传到后台的当前页的id的参数名，这个传值会自动添加在href或ajax的url末尾
        //url: "/Home/List/",               //需要提交的目标控制器，如"/Home/List/"或"/Home/List?name='张三'&password='123456'"
        //limit: 5000,                       //设置滚动显示方式的极限值，大于则自动切换无滚动模式
        //animation: true,             //是否是滚动动画方式呈现  false为精简方式呈现   页数大于limit时无论怎么设置自动默认为false
        //ajaxData: {},                     //ajax方式传值时的附加传值,要传的参数放在这里面,页面参数只要指定idParamemeter就好，会自动添加,该参数只有在ajax方式下有用
        //ajaxDataType: "json",             //发生ajax请求时,dataType参数值,如跨域时为'jsonp'
        //jsonpCBName: "jsonp_cb",         //跨域请求时的回调函数名,ajaxDataType为jsonp时有效
        //firstAjaxSubmit: true,        //表示初始化时是否自动请求一次，用以获得total,currentPage等参数
        //beforeAjaxSubmit: function () { },     //ajax模式下，在发出请求之前的操作函数
        //ajaxSubmitBack: function (data) { }         //用于ajax返回的数据的操作,回调函数,data为服务器返回数据
        //simpleType: 0                    // 精简模式可选0和1两种


        /***********可使用部分API参考，API统一通过PageAPI对象调用，参考上面的例子****************/
        //IsDone()          //判断插件是否已初始化完成
        //GetCurrentPage()  //获取当前页
        //GetTotalPage()   //获取总页数
        //AddAjaxData(json)   //增加或替换附带发送参数
        //SetRequestUrl(string)  //改变插件请求url
        //GetAjaxData()   //获取当前附带传参对象
        //ReplaceAjaxData(json)  //用新对象完全替换当前附带传参对象
        //AjaxSubmit()   //插件外主动请求
        //HiddenLast(int)   //同时隐藏/显示首页和上一页标签   0隐藏 1显示  下个版本增加，当前版本不可用
        //HiddenFirst(int)  //同时隐藏/显示尾页和下一页标签   0隐藏 1显示  下个版本增加，当前版本不可用

    });
</script>
</body>
</html>
